<template>
  <div>
    <m-calendar>
      <div slot="header-left" class="calendar">日历</div>
      <div slot="header-right" class="filter">筛选</div>
    </m-calendar>
    <br>
    <hr>
    <br>
    <button @click="toShotPage">去拍照</button>
    <id-shot></id-shot>
    <img :src="imgSrc" alt="">
    <img :src="shotImg" alt="">
    <div ref="imgCont" class="img-cont">
      <div ref="catchCont" class="catch-cont"></div>
      <img ref="regionImg" class="img-test" src="../assets/images/img-test.jpg" alt="">
    </div>
    <button @click="handleShot">截取</button>
    <canvas v-show="false" ref="canvas" class="canvas"></canvas>
  </div>
</template>

<script>
import MCalendar from '@/components/07-MCalendar/MCalendar.vue'
import IdShot from '@/components/08-IdShot/index.vue'
export default {
  components: {
    MCalendar,
    IdShot
  },
  data () {
    return {
      imgSrc: '',
      shotImg: ''
    }
  },
  created () {
    this.imgSrc = this.$route.query.imgSrc
  },
  mounted () {
    setTimeout(() => {
      this.handleShot()
    }, 500);
  },
  methods: {
    toShotPage () {
      this.$router.push('/ShotPage')
    },
    handleShot () {
      const [ _canvas, _regionImg, _imgCont, _catchCont ] = [this.$refs.canvas, this.$refs.regionImg, this.$refs.imgCont, this.$refs.catchCont]
      // _canvas.getContext('2d').drawImage(_video, 0, 0, 300, 200)
      console.log('_imgCont', _imgCont);
      console.log('catch-cont', _catchCont);
      console.log('_regionImg', _regionImg);
      console.log('_canvas', _canvas);
      // debugger
      const c2d = _canvas.getContext('2d')
      console.log('c2d', c2d);
      const top = _catchCont.offsetTop
      const left = _catchCont.offsetLeft / 6
      const height = _catchCont.offsetHeight * 3.6
      const width = _catchCont.offsetWidth * 1.5
      const imgHeight = _regionImg.offsetHeight
      const imgWidth = _regionImg.offsetWidth
      // const canvasLeft = _canvas.offsetLeft
      // const canvasWidth = _canvas.offsetWidth
      // console.log('top', top, left, height, width, imgHeight, imgWidth);
      console.log('top', top);
      console.log('left', left);
      console.log('height', height);
      console.log('width', width);
      console.log('imgHeight', imgHeight);
      console.log('imgWidth', imgWidth);
      // console.log('canvasLeft', canvasLeft);
      // console.log('canvasWidth', canvasWidth);
      c2d.drawImage(_regionImg, 0, 0, imgWidth, imgHeight, 0, 0, imgWidth, imgHeight)
      // c2d.drawImage(_regionImg, 0, 0, height, width)
      // _canvas.getContext('2d').drawImage(_video, 0, 0)
      console.log('_canvas', _canvas);
      // _img.src = _canvas.toDataURL('image/png')
      this.shotImg = _canvas.toDataURL('image/png')
      console.log(this.shotImg);
    }
  }
}
</script>

<style lang="less" scoped>
.test-span {
  // color: @red-light;
}

.img-cont {
  position: relative;
  width: 500px;
  height: 280px;

  .img-test {
    width: 100%;
    height: 100%;
    // width: 500px;
    // height: 280px;
  }

  .catch-cont {
    // content: '';
    // display: inline-block;
    position: absolute;
    // width: 180px;
    // height: 118px;
    width: 158px;
    height: 100px;
    left: 21%;
    top: 25%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.233);
  }
}

.canvas {
  width: 158px;
  height: 100px;
}

</style>
